{% extends "admin/layout.html" %}
{% set active_page = "index" %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">系统概览</h2>
        <form action="{{ url_for('wxwork.sync_organization') }}" method="post" style="display: inline;">
            <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
            <button class="btn btn-primary" type="submit">
                <i class="fas fa-sync-alt me-1"></i> 立即同步
            </button>
        </form>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted">部门数量</h5>
                            <h3 class="card-text">{{ department_count }}</h3>
                        </div>
                        <div class="icon-circle bg-primary text-white">
                            <i class="fas fa-sitemap fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted">人员总数</h5>
                            <h3 class="card-text">{{ member_count }}</h3>
                        </div>
                        <div class="icon-circle bg-success text-white">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted">群组数量</h5>
                            <h3 class="card-text">{{ group_count }}</h3>
                        </div>
                        <div class="icon-circle bg-info text-white">
                            <i class="fas fa-comments fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted">上次同步</h5>
                            <h3 class="card-text">
                                {% if last_sync_time %}
                                {{ last_sync_time.strftime('%Y-%m-%d %H:%M') }}
                                {% else %}
                                从未同步
                                {% endif %}
                            </h3>
                        </div>
                        <div class="icon-circle bg-warning text-white">
                            <i class="fas fa-history fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 同步日志 -->
    <div class="card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">最近同步记录</h5>
            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('wxwork.sync_logs') }}">查看全部</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>同步时间</th>
                        <th>状态</th>
                        <th>新增部门</th>
                        <th>更新部门</th>
                        <th>新增人员</th>
                        <th>更新人员</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for log in logs %}
                    <tr>
                        <td>{{ log.sync_time.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            {% if log.status == 'success' %}
                            <span class="badge bg-success">成功</span>
                            {% elif log.status == 'processing' %}
                            <span class="badge bg-warning">进行中</span>
                            {% else %}
                            <span class="badge bg-danger">失败</span>
                            {% endif %}
                        </td>
                        <td>{{ log.departments_added }}</td>
                        <td>{{ log.departments_updated }}</td>
                        <td>{{ log.users_added }}</td>
                        <td>{{ log.users_updated }}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip" title="查看详情">
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </td>
                        <td>
                            {% if dp and dp.id %}
                            <form action="{{ url_for('wxwork.retry_join', group_user_id=dp.id) }}" method="post" style="display: inline;">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-sm btn-warning">重试</button>
                            </form>
                            {% else %}
                            <p>无</p>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-center" colspan="7">暂无同步记录</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 待处理任务 -->
    <div class="row">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">待处理成员</h5>
                </div>
                <div class="card-body">
                    {% if pending_members %}
                    <div class="list-group">
                        {% for member in pending_members %}
                        <div class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">{{ member.name }}</h6>
                                <small>
                                    {% if member.department %}
                                    {{ member.department.name }}
                                    {% else %}
                                    无部门
                                    {% endif %}
                                </small>
                            </div>
                            <p class="mb-1">用户ID: {{ member.wecom_userid }}</p>
                            <small>尚未加入任何群组</small>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-check-circle fa-3x mb-3"></i>
                        <p>没有待处理的成员</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">失败操作</h5>
                </div>
                <div class="card-body">
                    {% if failed_operations %}
                    <div class="list-group">
                        {% for op in failed_operations %}
                        <div class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">{{ op.user.name }} 加入 {{ op.group.name }}</h6>
                                <small>{{ op.joined_at.strftime('%m-%d %H:%M') }}</small>
                            </div>
                            <p class="mb-1 text-danger">{{ op.message|truncate(50) }}</p>
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-sm btn-warning me-2"
                                        onclick="retryJoin({{ op.id }})">重试
                                </button>
                                <button class="btn btn-sm btn-outline-secondary">详情</button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-check-circle fa-3x mb-3"></i>
                        <p>没有失败的操作</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var retryJoinUrl = "{{ url_for('wxwork.retry_join', group_user_id=0) }}";


    function retryJoin(groupUserId) {
        var url = retryJoinUrl.replace('0', groupUserId);
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('操作成功: ' + data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('请求失败，请检查控制台日志');
            });
    }
</script>
{% endblock %}